<template>
  <el-dialog
    title="图片显示"
    :visible.sync="picDialogVisible"
    width="60%">
    <img :src="showImgUrl" alt="商品图片" class="goodImg">
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      picDialogVisible: false, // dialog控制器
    }
  },
  props: {
    showImgUrl: String
  },
  methods: {
    picDialogOpen() {
      this.picDialogVisible = true;
    }
  },
  created() {
    this.$bus.$on('picDialogOpen', this.picDialogOpen);
  },
  destroyed() {
    this.$bus.$off('picDialogOpen');
  }
}
</script>

<style lang="scss" scoped>
  .goodImg {
    width: 100%;
  }
</style>